<script setup>
import {defineProps, onMounted, getCurrentInstance, nextTick} from "vue";
import RowPhraseWordSubTable from "@/components/RowPhraseWordSubTable.vue";
import Sortable from "sortablejs";
const props = defineProps(["theFormsPos"]);

let theRowSortable;
const rowDrop = () => {
  theRowSortable = Sortable.create(getCurrentInstance().ctx?.$el, {
    // draggable: ".pwSubTable .el-table__row",
    handle: ".pwSubTables .handle-forms",
    dataIdAttr: "data-id",
    group: "formsCnt",
    animation: 100,
    onEnd(evt) {


      // console.log("RowPhraseWordSubTables rowDrop end:",theRowSortable.toArray());
      props.theFormsPos.splice(evt.newIndex, 0, props.theFormsPos.splice(evt.oldIndex, 1)[0]); // 数据处理，获取最新的表格数据
      nextTick(function () {

        let showing = theRowSortable.toArray().join("\n");
        let dataTexts = props.theFormsPos.map(ele => ele.form).join("\n");
        // console.log("RowPhraseWordSubTables rowDrop end nextTick:","\n"+showing,"\n\n"+dataTexts);

        if (showing !== dataTexts) {
          theRowSortable.sort(props.theFormsPos.map(ele => ele.form), false);
        }

        console.log("RowPhraseWordSubTables onEnd:,",props.theFormsPos)
      })
    }
  });
}

onMounted(()=>{
  console.log("RowPhraseWordSubTables mounted",getCurrentInstance().ctx?.$el);
  rowDrop();
})
</script>

<template>

  <div class="pwSubTables">
    <div v-for="(formPos,idx) in theFormsPos" class="pwSubTable" :data-id="formPos.form">
      <RowPhraseWordSubTable :theFormPos="formPos"></RowPhraseWordSubTable>
    </div>
  </div>

</template>

<style scoped>

</style>